<template>
	<view class="register">
		<!-- <view class="register__tips">登录注册后，可以下载app</view> -->
		<input-verify class="input" inputType="common" placeHolder="invitation code" errMsg="code error" :readonly="true" v-model="otherInviteCode"
			:isVerifyCode="false"></input-verify>

		<input-verify class="input" inputType="common" placeHolder="Please enter your email" errMsg="email error" v-model="email"
			:isVerifyCode="false"></input-verify>

	<!-- 	<input-verify class="input-img-code" inputType="imgCode" placeHolder="Please enter..." errMsg="Verification code error" v-model="imgCode"
			:isVerifyCode="true" :imgVerificationCode="imgCodeUrl"
			@changeVerificationCode="changeVerificationCode"></input-verify> -->

		<input-verify class="input-msg-code" inputType="msgCode" placeHolder="Email verification..." errMsg="Verification code error" v-model="msgCode"
			@getMsgCode="getMsgCode" :isVerifyCode="true" :isImgCode="isImgCode" @isCanSetPhoneMsg="isCanSetPhoneMsg"
			ref="msgCodeRef"></input-verify>

		<button class="submit" :disabled="!isCanSubmit" :class="isCanSubmit ? 'submit--can':''"
			@click="handleClickSubmit()()">Register</button>

		<!-- <view class="download" @click="handleDownLoad">Download App</view> -->

		<!-- <view class="go-login" @click="goPwdLogin">已有账号，去登录</view> -->

		<!-- <view class="download" id="app-download">Download App</view> -->
	</view>
</template>

<script>
	import InputVerify from '@/components/InputVerify/index.vue'
	import {
		isPhoneNumFormat,
		isPasswordFormat
	} from '@/utils/reg.js'
	import {
		getImgVerificationCode,
		getUserCaptchaSendCode,
		userRegisterOrLogin,
		sendEmailCode,
		emailRegisterOrLogin
	} from '@/service/register.js'

	import { debounce } from '@/utils/common.js'

	export default {
		components: {
			InputVerify,
		},
		props: {
			isShowDownloadApp: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				otherInviteCode: '',
				email: '',
				msgCode: '',
				isSelectRights: false,
				imgCodeUrl: '',
				uid: '', // 获取图形验证码的动态uid
				imgUrlFlag: true, // imgUrlFlag 控制多次触发图形验证码接口的防抖变量
				passwordOld: "",
				passwordNew: "",
			}
		},
		computed: {
			isCanSubmit() {
				if (this.otherInviteCode && this.email && this.msgCode) {
					return true
				}

				return false
			},
			isImgCode() {
				if (this.email) {
					return true
				}
				return false
			}
		},
		mounted() {
			this.otherInviteCode = this.$store.state.otherInviteCode

			// #ifdef H5
				this.isWeChatBrowser()
			// #endif
		},
		methods: {
			isWeChatBrowser() {
			   const me =  navigator.userAgent.toLowerCase();
			   if(me.match(/MicroMessenger/i) == "micromessenger") {
				 return true
			   }
			   return false
			},
			handleDownLoad(platform) {
				const mode = this.getPlatform()
				switch(mode) {
					case 'android':
					window.location.href = 'https://apw.miniflixvideo.com/apk/miniflix.apk'
					break;

					case 'ios':
					uni.showToast({
						title: 'Not currently supported on iOS platform',
						duration: 1500,
						icon: 'none'
					})
					break;
				}
			},
			getPlatform() {
				const { platform } = uni.getSystemInfoSync()
				return platform || ''
			},

			handleClickSubmit() {
				return debounce(this.handleRegister, 300)
			},

			isCanSetPhoneMsg() {
				if (!this.email) {
					uni.showToast({
						icon: 'none',
						duration: 1500,
						title: 'Please enter your email'
					})
				}
			},
			// ...mapMutations(['setToken']),
			async getMsgCode() {
				if (!this.email) {
					uni.showToast({
						title: 'Email format error',
						icon: 'none',
						duration: 1500
					})

					return
				}


				const {
					data,
					statusCode:code
				} = await sendEmailCode({
					email: this.email,
				})
				console.log(data, code, '===》获取短信验证码');
				if (code === 200) {
					// uni.showToast({
					// 	icon: 'none',
					// 	mask: true,
					// 	title: 'request success',
					// });
					console.log('this.$refs.msgCodeRef:', this.$refs.msgCodeRef)
					if (this.$refs.msgCodeRef) {
						this.$refs.msgCodeRef.handleMsgCodeCountDownTime()
					}
				}
			},
			changeVerificationCode(val) {
			},
			getVerificationCode(falg) {
				if (falg) {
					this.imgUrlFlag = false
					this.uid = this.generateRdStr((5))
					uni.downloadFile({
						url: `applet/captcha/graphics?uid=${this.uid}`, //文件链接
						success: (res) => {
							if (res.statusCode === 200) {
								// this.uid = uid
								this.imgUrlFlag = true
								this.imgCodeUrl = res.tempFilePath; //临时路径再保存到本地
							}
						},
						fail: (err) => {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: 'Failed to obtain graphical captcha',
							});
						},
					})
				}
			},
			generateRdStr(len) {
				len = len || 32;
				var text = "";
				var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
				for (var i = 0; i < len; i++)
					text += possible.charAt(Math.floor(Math.random() * possible.length));
				return text;
			},
			handleChangeSelect() {
				this.isSelectRights = !this.isSelectRights
			},
			goPwdLogin() {
				this.$emit('goMsgLogin')
			},
			async handleRegister() {
				const { code, data, msg } = await emailRegisterOrLogin({
					email: this.email,
					inviteCode: this.otherInviteCode,
					code: this.msgCode
				})

				if(code === 200 && data) {
					const { token } = data

					if(token) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: 'successfully registered',
						});

						localStorage.setItem('sessionId', token)
						this.$emit('showDownload', this.email)
						if (!this.isShowDownloadApp) {
							// this.$emit('goPwdSet', {
							// 	code: this.msgCode
							// })

							uni.navigateTo({
							  // url: '/pages/addbank/addbank'
							  url: '/pages/index/index'
							})
						}
					}
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: msg,
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.register {
		width: 646upx;
		height: auto;

		padding: 32upx 24upx;
		box-sizing: border-box;

		margin: 0 auto;

		border-radius: 32upx;
		border: 1upx solid rgba(255, 255, 255, 0.50);

		background: rgba(255, 255, 255, 0.20);
		box-shadow: 0px 8upx 16upx 0px rgba(0, 0, 0, 0.30), 0px 24upx 48upx 0px rgba(251, 152, 173, 0.15) inset, 0px -24upx 48upx 0px rgba(5, 223, 255, 0.10) inset;
		backdrop-filter: blur(32upx);

		.register__tips {
			color: #333;

			text-align: center;
			font-family: "PingFang SC";
			font-size: 32upx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;

			margin-bottom: 40upx;
		}

		.input {
			margin-bottom: 24upx;
		}

		.input-img-code {
			margin-bottom: 22upx;
		}

		.input-msg-code {
			margin-bottom: 24upx;
		}

		// .download {
		// 	width: 426upx;
		// 	height: 96upx;

		// 	border-radius: 60upx;
		// 	background: linear-gradient(112deg, #F29F5A 0%, #FF8C00 100%);
		// 	color: #FFF;

		// 	text-align: center;
		// 	font-family: "PingFang SC";
		// 	font-size: 32upx;
		// 	font-style: normal;
		// 	font-weight: 500;
		// 	line-height: 96upx;
		// }

		.submit {
			width: 426upx;
			height: 96upx;

			border-radius: 60upx;
			background: #E0E0E0;

			color: #AAA;

			text-align: center;
			font-family: "PingFang SC";
			font-size: 32upx;
			font-style: normal;
			font-weight: 500;
			line-height: 96upx;
			margin-top: 64upx;

			&--can {
				color: #333;
				background: linear-gradient(112deg, #F29F5A 0%, #FF8C00 100%);
				color: #FFF;
			}

			&:after {
				border: none;
			}
		}

		.rights {
			margin-top: 24upx;
		}

		.go-login {
			color: #FF8C00;

			text-align: center;
			font-family: "PingFang SC";
			font-size: 24upx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			text-decoration: underline;

			margin-top: 24upx;
		}

		.download {
			color: #00F6FF;
			text-align: center;

			margin-top: 40upx;
			text-decoration: underline;
		}

		.input-password-old,
		.input-password-new {
		  margin-bottom: 40upx;
		}

		.whole-Mask {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.8);
			z-index: 999;
		}

		.guide-whole {
			width: 100%;
			padding:100upx;
			color: #fff;
			margin-top: 100upx;
		}
		.guide-title {
			float: left;
		}
		.guide-title view{
			color: #fff;
		}
		.guide-img {
			float: right;
			width: 100upx;
			height: 100upx;
		}
	}
</style>